<template>
  <view class="acqui_verification_code">
    <view class="verification_code_continor">
      <view v-for="(item, index) in latticeNum" :key="index" class="verification_code_item" :style="latticeSty(index)" @tap="latticeFoc(index)">
        <template v-if="inputValues[index]">
          <view v-if="ciphertextSty == 1" class="point"></view>
          <template v-else>
            {{ ciphertextSty == 2 ? '*' : inputValues[index] }}
          </template>
        </template>
      </view>
    </view>
    <view class="input_info"><input style="width: 100%; height: 100%" :type="inputType" v-model="inputValues" :focus="focusDefault" :maxlength="latticeNum" @input="inputVal" @blur="blur" @focus="focus" /></view>
  </view>
</template>

<script>
  export default {
    props: {
      latticeNum: {
        type: Number,
        default: 4
      },

      latticeSize: {
        type: Number,
        default: 100
      },

      borderStyle: {
        type: String,
        default: 'border-bottom:1px solid gray;'
      },

      borderCheckStyle: {
        type: String,
        default: 'border: 1px solid red !important;'
      },

      inputType: {
        type: String,
        default: 'tel'
      },

      blurShow: {
        type: Boolean,
        default: false
      },

      ciphertextSty: {
        type: Number,
        default: 0
      },

      updateOne: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        inputValues: '',
        blurShowLocal: true,
        focusDefault: false
      }
    },
    mounted() {
      this.blurShowLocal = this.blurShow
    },
    created() {
      this.inputValues = ''
    },
    methods: {
      latticeSty(index) {
        let str = this.blurShowLocal && (this.inputValues.length == index || (this.inputValues.length == this.latticeNum && index == this.latticeNum - 1)) ? this.borderCheckStyle : this.borderStyle
        str += `;width:${this.latticeSize}rpx;height:${this.latticeSize}rpx`
        return str
      },

      getValue() {
        return this.inputValues
      },

      inputVal(e) {
        // console.log(e);
        // this.inputValues = e.data;
        this.$emit('inputVerificationChange', this.inputValues)
      },

      /**
       * verificationCodeValue
       */
      setVerificationCode(verificationCodeValue) {
        if (!verificationCodeValue) return
        this.inputValues = verificationCodeValue
      },

      cleanVal() {
        this.inputValues = ''
      },
      latticeFoc(index) {},
      blur() {
        !this.blurShow ? (this.blurShowLocal = false) : ''
      },
      focus() {
        !this.blurShow ? (this.blurShowLocal = true) : ''
      },
      setFocus() {
        this.focusDefault = true
      }
    }
  }
</script>

<style lang="less">
  .acqui_verification_code {
    position: relative;
    .verification_code_continor {
      display: flex;
      justify-content: center;
      text-align: center;
      .verification_code_item {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        display: flex;
      }

      .verification_code_item:not(:first-child) {
        margin-left: 20rpx;
      }
      .point {
        width: 10rpx;
        height: 10rpx;
        background-color: black;
        border-radius: 200px;
      }
    }

    .input_info {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 8;
      display: flex;
      justify-content: center;
      opacity: 0;
      & > input {
        width: 80%;
        height: 100%;
      }
    }
  }
</style>
